<template>
  <ProTable
    ref="tableRef"
    :fetchListApi="_listProject"
    :columns="columns"
    row-key="projectId"
    :row-selection="rowSelection"
  >
    <template #toolbars>
      <Space>
        <b-button icon="add" @click="onAdd()" code="project:add">新增</b-button>
        <b-button
          icon="delete"
          :disabled="!selectKeys?.length"
          @click="onDelete"
          code="project:remove"
          >删除</b-button
        >
        <b-button
          :disabled="!selectKeys?.length"
          @click="onTest"
          code="project:set:testproject"
          >设为测试项目</b-button
        >
      </Space>
    </template>

    <template #operation="{ record }">
      <b-button
        v-if="record.projectId != 0"
        icon="detail"
        type="link"
        @click="onView(record)"
        code="project:query"
        >详情</b-button
      >
      <b-button
        icon="edit"
        type="link"
        @click="onAudit(record)"
        v-if="record.isAudit !== '0'"
        code="project:audit"
        >审核</b-button
      >
    </template>
    <template #control="{ search, searchParams }">
      <ProjectTree
        class="project-tree"
        :treeData="treeData"
        @select="onTreeSelect"
        @edit="onTreeEdit"
        @add="onTreeAdd"
        @delete="onTreeDelete"
        :fieldNames="{
          children: 'children',
          title: 'name',
          key: 'projectId',
          parentId: 'parentId',
        }"
      />
    </template>

    <template #setNumber="{ record }">
      <Tree
        :tree-data="record.projectNumVO"
        defaultExpandAll
        :fieldNames="{
          children: 'child',
          title: 'name',
          key: 'name',
        }"
      >
        <template #title="{ dataRef }">
          <span>{{ dataRef.name + '(' + dataRef.value + ')' }}</span>
        </template>
      </Tree>
    </template>
  </ProTable>
  <FormModal :items="items" wrapClassName="project_modal">
    <template
      #customFooter="{ visible, formState, modalType }"
      v-if="isAudit === 'audit'"
    >
      <b-button
        type="primary"
        @click="onPass(visible, formState)"
        v-if="!loading"
        >通过</b-button
      >
      <b-button :loading="true" type="primary" v-else></b-button>
      <b-button @click="onCancel(visible, modalType)">取消</b-button>
    </template>

    <template
      #customFooter="{ visible, formState, modalType }"
      v-if="isAudit === 'info'"
    >
      <template v-if="activeKey == '1'">
        <b-button
          @click="onEdit(visible, modalType)"
          v-if="modalType.value === 'info'"
          code="project:edit"
          >编辑</b-button
        >
        <b-button
          type="primary"
          v-else
          :loading="loading"
          @click="onSubmit(visible, formState, modalType)"
          >确认</b-button
        >
        <b-button
          @click="onCancel(visible, modalType)"
          v-if="modalType.value !== 'info'"
          >取消</b-button
        >
      </template>
    </template>
    <template #audit="{ formState }">
      <div class="audit_info">
        <div class="audit_title">
          <div>项目信息审核</div>
          <div
            :class="[
              {
                audit: formState.isAudit !== '0',
              },
              {
                pass: formState.isAudit == '0',
              },
            ]"
          >
            {{ formState.isAudit == '0' ? '已通过' : '待审核' }}
          </div>
        </div>
        <div class="audit_detail">
          <div>
            <span>创建时间: </span>
            <span> {{ formState.createTime || '--' }}</span>
          </div>
          <div>
            <span>申请人: </span>
            <span> {{ formState.createBy || '--' }}</span>
          </div>
          <div>
            <span>审核时间: </span>
            <span> {{ formState.auditTime || '--' }}</span>
          </div>
          <div>
            <span>审核人: </span>
            <span> {{ formState.auditBy || '--' }}</span>
          </div>
        </div>
      </div>
    </template>
    <template #tab="{ formState }">
      <Tabs v-model:activeKey="activeKey">
        <TabPane key="1" tab="项目详情"></TabPane>
        <TabPane
          key="2"
          tab="编辑内容"
          v-if="!['0', '2'].includes(formState.isAudit)"
        ></TabPane>
        <TabPane key="3" tab="信息编辑历史"></TabPane>
      </Tabs>
    </template>

    <!-- 编辑内容 -->
    <template #editInfo="{ formState }">
      <div class="edit_info">
        <div
          v-for="(i, y) in formState.newestAuditVO?.updateInfoJson"
          :key="y"
          class="info"
        >
          <span>{{ i.name || '--' }}</span>
          <template v-if="i.newValue || i.oldValue">
            <span>
              <span class="left_span">修改前：</span>
              <span class="right_span">{{ i.oldValue || '--' }}</span>
            </span>
            <span>
              <span class="left_span">修改后：</span>
              <span class="right_span">{{ i.newValue || '--' }}</span>
            </span>
          </template>
        </div>
      </div>
    </template>

    <!-- 信息编辑历史 -->
    <template #info="{ formState }">
      <div class="edit_info">
        <Timeline>
          <TimelineItem
            color="#1890ff"
            v-for="item in formState.auditNewVOS"
            :key="item.id"
          >
            <div>
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  padding: 0 12px;
                "
              >
                <span>{{ item.userName || '--' }}</span>
                <span>{{ item.time || '--' }}</span>
              </div>
              <div class="time_line_info">
                <div v-if="item.type == '2'">
                  <span>审核</span>
                  <span class="right_span">通过</span>
                </div>
                <!-- <div>
                  <span>申请人</span>
                  <span class="right_span">{{ item.createBy || '--' }}</span>
                </div> -->
                <div
                  v-for="(i, y) in item.updateInfoJson"
                  :key="y"
                  class="info"
                >
                  <span>{{ i.name || '--' }}</span>
                  <template v-if="i.newValue || i.oldValue">
                    <span
                      ><span class="left_span">修改前：</span>
                      <span class="right_span">{{
                        i.oldValue || '--'
                      }}</span></span
                    >
                    <span
                      ><span class="left_span">修改后：</span>
                      <span class="right_span">{{
                        i.newValue || '--'
                      }}</span></span
                    >
                  </template>
                </div>
              </div>
            </div>
          </TimelineItem>
        </Timeline>
      </div>
    </template>

    <template #province="{ formState }">
      <FormItemRest>
        <div class="cascade_form">
          <div>
            <FormItem
              name="province"
              :rules="[{ required: true, message: '请选择省' }]"
            >
              <Select
                v-model:value="formState.province"
                placeholder="请选择省"
                :options="provinceOptions"
                @change="getRegionDict(formState, provinceOptions)"
              >
              </Select>
            </FormItem>
          </div>
          <div>
            <FormItem name="city">
              <!-- :rules="[{ required: true, message: '请选择市' }]" -->
              <Select
                v-model:value="formState.city"
                :options="regionsOptions"
                placeholder="请选择市"
                @change="getAreaDict(formState, regionsOptions)"
              >
              </Select>
            </FormItem>
          </div>
          <div>
            <FormItem name="area">
              <!-- :rules="[{ required: true, message: '请选择区' }]" -->
              <Select
                v-model:value="formState.area"
                :options="areaOptions"
                placeholder="请选择区"
              >
              </Select>
            </FormItem>
          </div>
        </div>
      </FormItemRest>
    </template>
  </FormModal>
  <FormModal2 :items="_items"></FormModal2>
</template>

<script setup lang="tsx">
import { computed, h, nextTick, onMounted, ref } from 'vue';
import { hasPermission } from '@/permission';
import CustomTree from '@/views/statistical/components/customTree.vue';
import {
  Form,
  FormItem,
  FormItemRest,
  Modal,
  Select,
  Space,
  TabPane,
  Tabs,
  Tag,
  Timeline,
  TimelineItem,
  Tree,
  message,
} from 'ant-design-vue';
import {
  cloneDeep,
  differenceWith,
  forEach,
  isEqual,
  omit,
  pick,
  reduce,
  uniq,
} from 'lodash-es';
import { ProFormProps } from '@/components/ProForm';
import { ProTable, ProTableProps } from '@/components/ProTable/index';
import { useFormModal } from '@/hooks/formModal';
import { handleTree, listToEnum, listToOption } from '@/utils/utils';
import { findCodeInTree } from '@/utils/utils';
import {
  addCatalogueNew,
  addProjectNew,
  editProject,
  getChinaArea,
  getDetailNew,
  getListNew,
  getProjectPass,
  listProject,
  removeNewProject,
  setTestProject,
  updateProject,
  updateProjectDataInfo,
} from '@/api/config';
import { fetchDictOfType } from '@/api/dict';
import ProjectTree from './components/pageSider.vue';

const isTestEnum = {
  0: '是',
  1: '否',
};

const comparisonObject = (obj1: any, obj2: any, requiredParams?: any) => {
  if (!Array.isArray(requiredParams)) requiredParams = [requiredParams];
  const differences1 = reduce(
    Object.keys(obj1),
    (result: any, key: any) => {
      if (!isEqual(obj1[key], obj2[key])) {
        result.push(key);
      }
      return result;
    },
    [],
  );
  const differences2 = reduce(
    Object.keys(obj2),
    (result: any, key: any) => {
      if (!isEqual(obj1[key], obj2[key])) {
        result.push(key);
      }
      return result;
    },
    [],
  );
  const differences = uniq([
    ...differences1,
    ...differences2,
    ...requiredParams,
  ]);
  const beforeModify = cloneDeep(obj1);
  Object.keys(beforeModify).forEach((key) => {
    beforeModify[key] = null;
  });
  const afterModify = pick(obj2, differences);

  return { ...beforeModify, ...afterModify };
};

const tableRef = ref();

const _listProject = async (params: any) => {
  params.projectId = selectId.value;
  const res: any = await getListNew(params);
  const rows = res.rows.map((item: any) => {
    if (!item.projectNumVO) {
      item.projectNumVO = [];
    }
    if (
      Object.prototype.toString.call(item.projectNumVO) === '[object Object]'
    ) {
      item.projectNumVO = [item.projectNumVO];
    }
    return item;
  });
  return {
    rows,
    total: res.total,
  };
};

const typeArray = [
  { label: '目录', value: '1' },
  { label: '项目', value: '2' },
];
const sysNormalDisableOption = ref<Global.Option[]>([]);
const sysNormalDisableEnum = ref<Record<string, any>>({});
const provinceOptions = ref<Global.Option[]>([]);

const getTreeData = async () => {
  const result = JSON.parse(sessionStorage.getItem('projectMange') || '1');
  if (result && result.length) treeData.value = result;
  const res = await listProject({ type: 1 });
  treeData.value = handleTree(res.data, 'projectId');
  treeData.value[0].name = '预警终端管理系统';
  sessionStorage.setItem('projectMange', JSON.stringify(treeData.value));
};

const init = async () => {
  fetchDictOfType('sys_normal_disable').then((res) => {
    sysNormalDisableEnum.value = listToEnum(
      res.data as any,
      'dictValue',
      'dictLabel',
    );
    sysNormalDisableOption.value = listToOption(
      res.data as any,
      'dictLabel',
      'dictValue',
    );
  });
  getChinaArea().then((result: any) => {
    provinceOptions.value = result.data.map((item: any) => {
      return {
        label: item.name,
        value: item.shortCode,
        ...item,
      };
    });
  });
  getTreeData();
};
const treeData: any = ref([]);
init();

const columns = computed<ProTableProps['columns']>(() => [
  {
    title: '项目编号',
    dataIndex: 'code',
    fixed: 'left',
  },
  {
    title: '项目全称',
    dataIndex: 'name',
    fixed: 'left',
  },
  {
    title: '项目简称',
    dataIndex: 'shortName',
    fixed: 'left',
  },
  {
    title: '归属目录',
    hideInTable: true,
    dataIndex: 'projectIds',
    customSearchRender(formState) {
      const fieldNames = {
        children: 'children',
        label: 'name',
        value: 'projectId',
        key: 'projectId',
      };

      const onChangeForTree = (value: any) => {
        console.log(value, 'value');

        formState['projectIds'] = value;
      };
      return (
        <CustomTree
          treeCheckStrictly={true}
          filed='projectIds'
          formState={formState}
          data={treeData.value}
          onChange={onChangeForTree}
          fieldNames={fieldNames}
          tree-node-filter-prop={'name'}
        ></CustomTree>
      );
    },
  },
  {
    title: '归属目录',
    hideInSearch: true,
    dataIndex: 'directoryName',
    customRender: ({ text }) => {
      const label = text === '全部' ? '预警终端管理系统' : text;
      return <span>{label}</span>;
    },
  },
  {
    title: '项目用途',
    dataIndex: 'useInfo',
  },
  {
    title: '设备数量统计',
    dataIndex: 'setNumber',
    width: 220,
    hideInSearch: true,
  },
  {
    title: '测试项目',
    dataIndex: 'testStatus',
    hideInSearch: true,
    width: 80,
    customRender({ text }) {
      const style = {
        color: '#1890ff',
      };
      return <span style={style}>{isTestEnum?.[text]}</span>;
    },
  },
  {
    title: '是否启用',
    dataIndex: 'status',
    width: 80,
    valueEnum: {
      ...sysNormalDisableEnum.value,
    },
    customRender({ text }) {
      return (
        <Tag color={text == '1' ? 'error' : 'processing'}>
          {
            sysNormalDisableEnum.value?.[
              text as keyof typeof sysNormalDisableEnum.value
            ]
          }
        </Tag>
      );
    },
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    hideInSearch: true,
  },
  {
    title: '创建人',
    dataIndex: 'createBy',
    hideInSearch: true,
  },
  {
    title: '审核状态',
    dataIndex: 'isAudit',
    valueEnum: {
      '0': '已通过',
      '1': '未审核',
    },
    width: 120,
    customRender({ text }) {
      const style = {
        color: text == '0' ? '#26cc13' : '#F19335',
      };
      const label = text === '0' ? '已通过' : '待审核';
      return <span style={style}>{label}</span>;
    },
  },
  {
    title: '审核时间',
    dataIndex: 'auditTime',
    hideInSearch: true,
  },
  {
    title: '操作',
    dataIndex: 'operation',
    hideInSearch: true,
    fixed: 'right',
    width: 150,
  },
]);

const disabledNode = (tree: any) => {
  return tree.map((node: any) => {
    const newNode = { ...node };

    if (newNode.parentId === null) {
      newNode.disabled = true;
    }

    if (newNode.children && Array.isArray(newNode.children)) {
      newNode.children = disabledNode(newNode.children);
    }

    return newNode;
  });
};
console.log(disabledNode(treeData.value), 'disabledNode(treeData.value)');

const customItems = computed(() => {
  if (activeKey.value == '1') {
    return [
      {
        label: '项目编号',
        type: 'input',
        field: 'code',
        props: {
          disabled: true,
        },
        // hide: (state: any, modalType: any) => modalType !== 'info',
      },
      {
        label: '上级目录',
        type: 'treeSelect',
        field: 'parentId',
        rules: [
          {
            required: true,
            message: '请选择上级目录',
            trigger: 'blur',
          },
        ],
        props: {
          placeholder: '请选择上级目录',
          treeData: disabledNode(treeData.value),
          fieldNames: {
            label: 'name',
            value: 'projectId',
          },
        },
      },
      {
        label: '项目全称',
        type: 'input',
        field: 'name',
        rules: [
          {
            required: true,
            message: '请输入项目全称',
            trigger: 'blur',
          },
        ],
        props: {
          placeholder: '请输入项目全称',
        },
      },
      {
        label: '项目用途',
        type: 'input',
        field: 'useInfo',
        rules: [
          {
            required: true,
            message: '请输入项目用途',
            trigger: 'blur',
          },
        ],
        props: {
          placeholder: '请输入项目用途',
        },
      },
      {
        label: '项目简称',
        type: 'input',
        field: 'shortName',
        rules: [
          {
            required: true,
            message: '请输入项目简称',
            trigger: 'blur',
          },
        ],
        props: {
          placeholder: '请输入项目简称',
        },
      },
      {
        label: '是否启用',
        type: 'select',
        field: 'status',
        rules: [
          {
            required: true,
            message: '请选择是否启用',
            trigger: 'blur',
          },
        ],
        props: {
          placeholder: '请选择是否启用',
          options: sysNormalDisableOption.value,
        },
      },
      {
        label: '所在区域',
        type: 'select',
        field: 'province',
        rules: [
          {
            required: true,
            message: '',
            trigger: 'blur',
          },
        ],
      },
      {
        label: '项目说明',
        type: 'textarea',
        rules: [
          {
            required: true,
            message: '请输入项目说明',
            trigger: 'blur',
          },
          {
            min: 1,
            max: 1000,
            message: '上限1000个字符',
            trigger: 'change',
          },
        ],
        field: 'explainInfo',
        props: {
          rows: 4,
          showCount: true,
          maxlength: 1000,
        },
      },
    ];
  } else if (activeKey.value == '2') {
    return [
      {
        label: '',
        type: 'input',
        field: 'editInfo',
        wrapperCol: { span: 24 },
        colProps: {
          span: 24,
        },
      },
    ];
  } else {
    return [
      {
        label: '',
        type: 'input',
        field: 'info',
        wrapperCol: { span: 24 },
        colProps: {
          span: 24,
        },
      },
    ];
  }
});
const items = computed(() => [
  {
    label: '',
    type: 'input',
    field: 'audit',
    wrapperCol: { span: 24 },
    colProps: {
      span: 24,
    },
    hide: (state: any, modalType: any) => modalType === 'add',
  },
  {
    label: '',
    type: 'input',
    field: 'tab',
    wrapperCol: { span: 24 },
    colProps: {
      span: 24,
    },
    hide: (state, modalType) =>
      !['info', 'edit', 'disabled'].includes(modalType),
  },
  ...customItems.value,
]);

const _items = computed<ProFormProps['items']>(() => [
  {
    label: '上级目录',
    type: 'treeSelect',
    field: 'parentId',
    hide: (state: any, modalType: any) => treeType.value !== 'add',
    rules: [
      {
        required: true,
        message: '请选择上级目录',
        trigger: 'blur',
      },
    ],
    props: {
      placeholder: '请选择上级目录',
      treeData: treeData.value,
      fieldNames: {
        label: 'name',
        value: 'projectId',
      },
    },
  },
  {
    label: '目录编码',
    type: 'input',
    field: 'code',
    rules: [
      {
        required: true,
        message: '请输入目录编码',
        trigger: 'blur',
      },
    ],
  },
  {
    label: '目录名称',
    type: 'input',
    field: 'name',
    rules: [
      {
        required: true,
        message: '请输入目录名称',
        trigger: 'blur',
      },
    ],
  },
]);
const { FormModal, open, formRef } = useFormModal({
  size: 'middle',
  column: 2,
  formProps: { labelCol: { span: 4 } },
});
const { FormModal: FormModal2, open: open2 } = useFormModal({ size: 'small' });
const selectId = ref();

const onAdd = async () => {
  regionsOptions.value = [];
  areaOptions.value = [];
  isAudit.value = 'add';
  activeKey.value = '1';
  open({
    title: '新增',
    defaultValue: {
      parentId: selectId.value ? selectId.value : null,
      status: '0',
    },
    serviceApi: async (params: any): Promise<any> => {
      await addProjectNew(params);
      sleep(() => tableRef.value.refresh());
    },
  });
};
const filterOutNode = (tree: any, projectId: any) => {
  return tree.filter((node: any) => {
    if (node.projectId === projectId) {
      return false;
    }
    if (node.children) {
      node.children = filterOutNode(node.children, projectId);
    }
    return true;
  });
};
const originalObject = ref({});
const onView = async (record: any) => {
  const dom = document.querySelector('body');
  dom.style.setProperty('--custom_height', '298px');
  activeKey.value = '1';
  const result: any = await getDetailNew(record.projectId);
  const defaultValue: any = result.data;
  originalObject.value = cloneDeep(result.data);
  isAudit.value = 'info';
  await getRegionDict(result.data, provinceOptions.value);
  await getAreaDict(result.data, regionsOptions.value);
  open({
    title: (type) => (type === 'info' ? '查看项目信息' : '编辑'),
    modalType: 'info',
    defaultValue: { ...record, ...defaultValue },
    serviceApi: async (params: any): Promise<any> => {},
    hasEditPermission: hasPermission('project:edit'),
  });
};
const isAudit = ref('');
const onAudit = async (record: any) => {
  activeKey.value = '1';
  isAudit.value = 'audit';
  const result = await getDetailNew(record.projectId);
  const defaultValue: any = result.data;
  const dom = document.querySelector('body');
  dom.style.setProperty('--custom_height', '266px');
  open({
    title: '审核',
    modalType: 'disabled',
    defaultValue: { ...record, ...defaultValue },
    serviceApi: async (params: any): Promise<any> => {
      await updateProject(params);
      sleep(() => tableRef.value.refresh());
    },
  });
};

const sleep = (cb) => {
  setTimeout(() => {
    cb();
  }, 500);
};

const onDelete = async () => {
  const ids = selectKeys.value.join(',');
  Modal.confirm({
    title: '系统提示',
    centered: true,
    content: `是否确认删除当前项目？`,
    onOk: async () => {
      await removeNewProject(ids);
      sleep(() => tableRef.value.refresh());
      message.success('操作成功');
    },
  });
};

const local = new Map();

/**
 * 获取地区字典
 */
const regionsOptions = ref<Global.Option[]>([]);
const getRegionDict = async (formState: any, list: any) => {
  const res = local.get(formState.province);
  if (res && res.length) return (regionsOptions.value = res);
  if (!formState.province) return;
  const item = list.find((i: any) => i.shortCode === formState.province);
  const result: any = await getChinaArea({ parentCode: item.code });
  regionsOptions.value = result.data.map((item: any) => {
    return {
      label: item.name,
      value: item.shortCode,
      ...item,
    };
  });
  local.set(formState.province, regionsOptions.value);
};

/**
 * 获取区字典
 */
const areaOptions = ref<Global.Option[]>([]);
const getAreaDict = async (formState: any, list: any) => {
  const res = local.get(formState.city);
  if (res && res.length) return (areaOptions.value = res);
  if (!formState.city) return;
  const item = list.find((i: any) => i.shortCode === formState.city);
  const result: any = await getChinaArea({ parentCode: item.code });
  areaOptions.value = result.data.map((item: any) => {
    return {
      label: item.name,
      value: item.shortCode,
      ...item,
    };
  });
  local.set(formState.city, areaOptions.value);
};

const activeKey = ref('1');
const loading = ref(false);
const onPass = async (visible: any, formState: any) => {
  loading.value = true;
  const res = await getProjectPass(formState.projectId);
  if (res.code == 200) {
    message.success('操作成功');
    visible.value = false;
    loading.value = false;
    sleep(() => tableRef.value.refresh());
  }
};
const onCancel = (visible: any, modalType: any) => {
  if (modalType.value === 'edit') {
    modalType.value = 'info';
    formRef.value.setFieldsValue(originalObject.value);
    return;
  }
  visible.value = false;
};

const selectKeys = ref<number[]>([]);
const rowSelection = ref<ProTableProps['rowSelection']>({
  onChange(values) {
    selectKeys.value = values as number[];
  },
});

const onTest = () => {
  Modal.confirm({
    title: '系统提示',
    centered: true,
    content: `是否将当前选中项目设为测试项目`,
    onOk: async () => {
      const res = await setTestProject({ data: selectKeys.value });
      if (res.code == 200) {
        sleep(() => tableRef.value.refresh());
        message.success('操作成功');
      }
    },
  });
};

// 左侧树结构选择
const onTreeSelect = (projectId: any) => {
  selectId.value = projectId;
  tableRef.value.refresh();
};
const treeType = ref('add');
const onTreeEdit = (projectId: any, parentId: any, name: any) => {
  treeType.value = 'edit';
  open2({
    title: '修改目录信息',
    modalType: 'add',
    defaultValue: {
      projectId,
      name,
      code: findCodeInTree(treeData.value, 'projectId', projectId),
    },
    serviceApi: async (params: any): Promise<any> => {
      await updateProjectDataInfo(params);
      tableRef.value.refresh();
      sessionStorage.setItem('projectMange', '');
      getTreeData();
    },
  });
};

const onTreeAdd = (projectId: any, parentId: any, name: any, code: any) => {
  treeType.value = 'add';
  open2({
    title: '新增',
    modalType: 'add',
    defaultValue: {
      parentId: projectId,
    },
    serviceApi: async (params: any): Promise<any> => {
      await addCatalogueNew(params);
      tableRef.value.refresh();
      message.success('操作成功');
      sessionStorage.setItem('projectMange', '');
      getTreeData();
    },
  });
};
const onTreeDelete = (projectId: any, parentId: any, name: any) => {
  Modal.confirm({
    title: '系统提示',
    centered: true,
    content: `是否确认删除当前目录？`,
    onOk: async () => {
      await removeNewProject(projectId);
      sleep(() => tableRef.value.refresh());
      getTreeData();
      sessionStorage.setItem('projectMange', '');
      message.success('操作成功');
    },
  });
};

const onEdit = (visible: any, modalType: any) => {
  modalType.value = 'edit';
};

const onSubmit = async (visible: any, formState: any, modalType: any) => {
  const queryParams = comparisonObject(
    originalObject.value,
    omit(formState, 'projectNumVO'),
    'projectId',
  );
  await editProject(queryParams);
  visible.value = false;
  sleep(() => tableRef.value.refresh());
};
</script>

<style lang="scss">
body {
  --custom_height: '298px';
}
@mixin item_style {
  padding: 8px;
  margin-top: 5px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.2);
}

.cascade_form {
  display: flex;
  & > div {
    flex: 1;
    &:nth-child(2) {
      margin: 0 8px;
    }
  }
}
:deep(.ant-form-item) {
  margin-bottom: 0 !important;
}
:deep(.ant-timeline-item-head) {
  width: 15px;
  height: 15px;
}
.time_line_info {
  @include item_style;
}
:deep(.ant-timeline-item-tail) {
  inset-inline-start: 6px;
  border-inline-start: 3px dashed rgba(0, 0, 0, 0.2);
}

.audit_info {
  @include item_style;
  padding: 8px 0px 8px 20px;
  .audit_title {
    display: flex;
    margin-bottom: 15px;
    align-items: center;
    div {
      &:nth-child(1) {
        font-weight: 700;
        margin-right: 20px;
      }
      &:last-child {
        padding: 1px 10px;
        border-radius: 4px;
        &.audit {
          background-color: #f19335;
        }
        &.pass {
          background-color: #26cc13;
        }
      }
    }
  }
  .audit_detail {
    display: flex;
    & > div {
      flex: 1;
    }
  }
}
@mixin unified {
  .info {
    & > span {
      &:first-child {
        display: inline-block;
        width: 120px;
      }
    }
  }
}
.time_line_info {
  @include unified;
}
.edit_info {
  padding-top: 10px;
  height: var(--custom_height);
  overflow-y: auto;
  box-sizing: border-box;
  .edit_item {
    margin-bottom: 10px;
  }
  @include unified;
}
.left_span {
  margin-left: 15px;
}
.right_span {
  color: #409eff;
  margin-left: 10px;
}

// .project_modal {
//   .ant-modal .ant-modal-content {
//     height: 650px;
//   }
// }
</style>
